{% extends '../base.html' %}
{% block css %}
<style>
  #main-con{
    width: 1300px;
    padding: 35px 40px;
    margin: 0 auto;
    background-color: #ffffff;
    align-items: flex-start;
  }
  #main-con > div:first-child{
    width: 1260px;
  }
  #main-con > div:nth-child(2) {
    width: 290px;
  }
  #exam-head{
    width: 1300px;
    margin: 0 auto;
    padding-left: 25px;
    font-weight: 600;
    color: #6b6b6b;
    font-size: 18px;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .error_msg{
    margin: 100px;
    text-align: center;
    font-size: 24px;
  }
  .head-tip{
    width: 10px;
    height: 30px;
    background-color: #ff9900;
    display: inline-block;
    margin-right: 15px;
  }
  #exam-info{
    padding: 30px 20px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
  }
  .avatar-name{
    display: flex;
  }
  .exam-name{
    margin-left: 25px;
    height: 174px;
  }
  .user-count{
    height: 100px;
  }
  .exam-name > p:nth-child(2){
    margin-top: 25px;
  }
  .exam-name > div{
    margin-top: 70px;
  }
  .exam-con-head{
    margin: 30px 0;
  }
  #exam-intro, #exam-desc{
    padding: 30px 40px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    color: #989898; 
    font-size: 18px;
    line-height: 24px;
  }
  .error-div {
    width: 960px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 28px;
    font-weight: 400;
    border-radius: 5px;
    color: #989898;
  }
  .question-choice{
    margin-top: 20px;
    padding: 10px 20px;
    border: 1px solid #333333;
  }
  textarea{
    margin-top: 20px;
    padding: 10px;
  }

  #submit-div{
    margin-top: 20px;
    padding-left: 40%;
  }

</style>
{% endblock css %}

{% block content %}
  <div id="exam-head">
    <span>考试测评 > 考试详情</span>
  </div>
  {% if error_msg %}
  <div class="error_msg">
    <span>{{error_msg}}</span>
  </div>
  {% endif %}
  <div id="main-con">
    <div id='exam-info' class="flex-row-between align-items-start">
      <div class="avatar-name title18">
        考试名称：{{paper.paper_name}}
      </div>
      <div class="flex-column-between">
        <div class="title18">
          倒计时：{{paper.duration}}分钟
        </div>
      </div>
    </div>
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">单选题</span>
    </div>
    {% for mc in paper.mc %}
    <div class="questions">
      <p class="title18">{{mc.describe}}</p>
      {% for op in mc.options %}
        <p class="title14 question-choice">
          {% if op.id in mc.student_answer %}
            <input  onchange="maChange({{mc.question_id}}, this)" type="radio" checked name="mc{{mc.id}}" value="{{op.id}}" />
          {% else %}
            <input onchange="maChange({{mc.question_id}}, this)" type="radio" name="mc{{mc.id}}" value="{{op.id}}" />
          {% endif %}
          {{op.content}}
        </p>
      {% endfor %}
    </div>
    {% endfor %}
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">多选题</span>
    </div>
    {% for m in paper.ma %}
    <div class="questions">
      <p class="title18">{{m.describe}}</p>
      {% for op in m.options %}
        <p class="title14 question-choice">
          {% if op.id in m.student_answer %}
            <input onchange="maChange({{m.question_id}}, this)" type="checkbox" checked name="ma{{m.id}}" value="{{op.id}}" />
          {% else %}
            <input onchange="maChange({{m.question_id}}, this)" type="checkbox" name="ma{{m.id}}" value="{{op.id}}" />
          {% endif %}
          {{op.content}}
        </p>
      {% endfor %}
    </div>
    {% endfor %}
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">判断题</span>
    </div>
    {% for m in paper.tf %}
    <div class="questions">
      <p class="title18">{{m.describe}}</p>
      {% for op in m.options %}
        <p class="title14 question-choice">
          {% if op.id in m.student_answer %}
            <input onchange="maChange({{m.question_id}}, this)"  type="radio" checked name="tf{{m.id}}" value="{{op.id}}" />
          {% else %}
            <input onchange="maChange({{m.question_id}}, this)"  type="radio" name="tf{{m.id}}" value="{{op.id}}" />
          {% endif %}
          {{op.content}}
        </p>
      {% endfor %}
    </div>
    {% endfor %}
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">填空题（多个空格答案用换行分隔）</span>
    </div>
    {% for b in paper.bl %}
      <p class="title18">{{b.describe}}</p>
      <textarea onblur="blChange({{b.question_id}}, this)"  rows="3" cols="80" class="blank">{{b.student_answer|default:''}}</textarea>
    {% endfor %}
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">简答题</span>
    </div>
    {% for b in paper.sa %}
      <p class="title18">{{b.describe}}</p>
      <textarea onblur="blChange({{b.question_id}}, this)" rows="6" cols="80"class="blank">{{b.student_answer|default:''}}</textarea>
    {% endfor %}
    <div id="submit-div">
      <span onclick="onSubmit()" class="btn-long">提交试卷</span>
    </div>
  </div>
{% endblock content %}

{% block script %}
<script src="/static/study/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/tools.js"></script>
<script>
  var paperModel = models.paperModel
  var layer;
  layui.use('layer', function(){
    layer = layui.layer;
  });              

  function maChange(ques_id, node) {
    console.log(node.name);
    nodes = document.getElementsByName(node.name)
    user_ans = []
    for (var i=0; i<nodes.length; i++) {
      if (nodes[i].checked)
        user_ans.push(parseInt(nodes[i].value))
    }
    paperModel.choiceAnswer({
      'exam_id': {{paper.exam_id}},
      'paper_id': {{paper.id}},
      'question_id': ques_id,
      'choice_answers': user_ans
    }, function(res){
      console.log(res)
    }, function(err) {
      layer.msg(err.message);
    })
  }

  function onSubmit() {
    console.log('submit')
    layer.confirm('确定提交试卷？提交后不可更改！', function(index){
      paperModel.submit({
        paper_id: {{paper.id}}
      }, function(res) {
        layer.msg(res.message)
        layer.close(index);
        location.href = "{% url 'study:exam' pk=paper.exam_id %}"
      }, function(err) {
        layer.close(index);
        layer.msg(err.message)
      })
    });
  }

  function blChange(ques_id, node) {
    paperModel.blankAnswer({
      'exam_id': {{paper.exam_id}},
      'paper_id': {{paper.id}},
      'question_id': ques_id,
      'blank_answer': node.value
    }, function(res) {
      console.log(res)
    }, function(err) {
      layer.msg(err.message);
    })
  }

</script>
{% endblock script %}
  